<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      text-color="#000000"
      active-text-color="#000000" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
      <el-menu-item index="1" style="width: 300px;">
        <template slot="title">
          <UploadFile :user="user" :token="token"/>
        </template>
      </el-menu-item>


      <el-menu-item index="2" @click="FolderOpen()">
        <el-button type="primary">
          <i class="el-icon-folder-add" style="color: white;"></i>
          新建文件夹
        </el-button>
      </el-menu-item>


      <el-submenu index="3" style="float: right;margin-right: 5%">
        <template slot="title">
          <el-avatar :size="40" :src="circleUrl"/>
          <span>{{ user.userName }}</span>
        </template>
        <el-menu-item index="5-1" @click="dialogVisible = true">修改密码</el-menu-item>
        <el-menu-item index="5-2" v-on:click="outLogin()">退出登录</el-menu-item>
      </el-submenu>

      <div style="float: right;padding: 0 0 0 2%">
        <el-button icon="el-icon-share" circle
                   @click="$router.push('/getshare')" title="获取分享文件"></el-button>
      </div>
      <div style="float: right">
        <Search/>
      </div>
    </el-menu>

    <div>
      <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span><el-input placeholder="请输入密码" v-model="newPassword" show-password></el-input></span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updatePassword">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import UploadFile from "./UploadFile";
import Global from "../js/global";
import eventBus from "../js/eventBus";
import Search from "./Search";


export default {
  name: "tp",
  props: ['user', 'token'],
  components: {
    'UploadFile': UploadFile,
    'Search': Search
  },
  data() {
    return {
      activeIndex: '0',
      circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      dialogVisible: false,
      newPassword: '',
      parentFolderId: '',
    };
  },
  created() {
    eventBus.$on("FolderId", data => {
      this.parentFolderId = data;
    })
  },
  methods: {
    FolderOpen() {
      const that = this;
      this.$prompt('输入新建文件夹名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        that.newFolder(value);
      }).catch((msg) => {
        console.log(msg)
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    newFolder(newFolderName) {
      const token = this.$cookies.get("TOKEN");
      const that = this;
      this.axios({
        url: Global.SERVER_ADDRESS + '/fileFolder/addFileFolder/' + newFolderName,
        params: {
          token: token,
          parentFolderId: that.parentFolderId
        },
        method: 'POST',
      }).then(function (rs) {
        that.dialogVisible = false;
        if (rs.data.code === '200') {
          that.successNotification("新建文件夹成功");
          eventBus.$emit("refresh", "do");
        } else {
          that.errorNotification("新建文件夹失败！！！")
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    updatePassword() {
      const token = this.$cookies.get("TOKEN");
      const that = this;
      this.axios({
        url: Global.SERVER_ADDRESS + '/user/updatePassword',
        params: {
          token: token,
          password: that.newPassword
        },
        method: 'PUT',
      }).then(function (rs) {
        that.dialogVisible = false;
        if (rs.data.code === '200') {
          that.successNotification("修改密码成功");

        } else {
          that.errorNotification("修改密码失败！！！")
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    outLogin() {
      this.$cookies.remove("TOKEN")
      this.$router.push('/login');
    },
    handleSelect(key, keyPath) {
    },
    handleRemove(file, fileList) {
    },
    handlePreview(file) {
    },
    successNotification(msg) {
      this.$notify({
        title: '成功',
        message: msg,
        type: 'success'
      });
    },

    open3() {
      this.$notify.info({
        title: '消息',
        message: '这是一条消息的提示消息'
      });
    },
    errorNotification(msg) {
      this.$notify.error({
        title: '失败',
        message: msg
      });
    },

  }
}

</script>

<style scoped>
a {
  text-decoration: none;
}
</style>
